<template>
    <div>
        <van-cell-group>
            <van-cell
                class="article-item"
                :to="{ name: 'article', params: { articleId: article.art_id } }"
            >
                <!-- van-multi-ellipsis--l3 最多显示三行的文字，多余的内容会被省略 -->
                <div slot="title" class="title van-multi-ellipsis--l3">
                    {{ article.title }}
                </div>
                <div slot="label">
                    <div v-if="article.cover.type === 3" class="cover-wrap">
                        <div
                            class="cover-wrap-item"
                            v-for="(item, index) in article.cover.images"
                            :key="index"
                        >
                            <van-image
                                class="cover-image"
                                fit="cover"
                                :src="item"
                            />
                        </div>
                    </div>
                    <div class="label-wrap">
                        <span>{{ article.aut_name }}</span>
                        <span>{{ article.comm_count }}评论</span>
                        <span>{{ article.pubdate | relativeTime }}</span>
                    </div>
                </div>
                <div slot="default" v-if="article.cover.type === 1">
                    <van-image
                        class="right-cover"
                        fit="cover"
                        :src="article.cover.images[0]"
                    />
                </div>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    created () { },
    methods: {

    }
}
</script>

<style scoped>
.article-item .title {
    font-size: 16px;
    color: #3a3a3a;
}
.van-cell__value {
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 12px;
}
.article-item .cover-wrap {
    display: flex;
    /* padding: 15px, 0; */
    /* margin: 15px, 0; */
    margin-top: 15px;
    margin-bottom: 15px;
}
.cover-wrap-item {
    flex: 1;
    height: 73px;
}
.cover-wrap-item:not(:last-child) {
    margin-right: 4px;
}
.cover-image {
    width: 100%;
    height: 73px;
}
.right-cover {
    width: 116px;
    height: 73px;
}
.label-wrap {
    font-size: 11px;
    color: #b4b4b4;
}
.label-wrap span {
    margin-right: 12px;
}
</style>
